{include file="../../../application/admin/view/public/head" /}
<style>
    table {
        table-layout: fixed;
    }


    td {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .layui-field-box .layui-btn {
        margin: 3px 5px;
    }
</style>
<div class="page-container p10">

    <div class="my-toolbar-box">

        <div class="left mb10">
            <fieldset class="layui-elem-field">
                <legend>{$typeInfo.name}类目下 二级分类管理</legend>
                <div class="layui-field-box">
                    <button type="button" class="layui-btn" id="uploadExcel">
                        <i class="layui-icon">&#xe67c;</i>上传分类文件
                    </button>
                    <a target="_blank" href="/static/zhibo/moban.xlsx" class="layui-btn">
                        <i class="layui-icon">&#xe601;</i>下载模版
                    </a>
                    <span>模版说明：在第一列第二行开始，按照顺序一行一个，从上至下按照先后排序</span>
                </div>
            </fieldset>


        </div>

    </div>
    {if $import===false}
    <div class="left mb10">尚未导入分类数据，请先下载模版，然后按照要求编辑好，最后通过上传按钮上传，将进入排序页面。</div>
    {else/}
    <form class="layui-form " method="post" id="pageListForm">
        <table class="layui-table" lay-size="sm">
            <thead>
            <tr>
                <th>名称</th>
                <th width="80">排序序号</th>
                <th>已绑定比赛名称</th>
                <th>操作</th>
            </tr>
            </thead>

            {volist name="sortArray" id="vo"}
            <tr>
                <td>{$vo.name}</td>
                <td>
                    <a data-href="{:url('index/select')}?tab=zhibo_sort_import&col=sort&tpl=select_sort&val={$vo.sort}&url=zhibo/field&ids={$vo.id}"
                       data-width="270" data-height="100" class=" j-select"><span class="layui-badge layui-bg-orange">{$vo.sort}</span></a>
                </td>
                <td class="list_{$vo.id}">
                    {if $vo.game_id>0}
                    <span class="layui-badge">{$vo.game_name}</span>
                    {/if}
                </td>
                <td style="overflow: visible">
                    {if !$vo.game_id}
                    <div class="layui-inline">
                        <select class="list" lay-filter="bindNameSort" lay-search data-id="{$vo.id}" >
                            <option>请选择</option>
                        </select>
                    </div>
                    {else/}
                    <div class="layui-inline">
                        <a class="layui-badge-rim j-ajax" href="javascript:void(0);" confirm="确定要解除绑定吗？" data-href="{:url('unbindNameSort',['game_id'=>$vo.game_id,'name_id'=>$vo.id])}">解除绑定</a>
                    </div>
                    {/if}
                    <div class="layui-inline">
                        <a class="layui-badge-rim j-ajax" href="javascript:void(0);" confirm="确定要删除吗？" data-href="{:url('deleteNameSort',['game_id'=>$vo.game_id,'name_id'=>$vo.id])}">删除</a>
                    </div>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>
        <div id="pages" class="center"></div>
    </form>
    {/if}

</div>


{include file="../../../application/admin/view/public/foot" /}

<script type="text/javascript">
    var curUrl = "{:url('zhibo/sort',$param)}";
    var games = {$games|json_encode};
    var leftGames=[];
    layui.use(['laypage', 'layer', 'form', 'upload'], function () {
        var laypage = layui.laypage
            , layer = layui.layer,
            form = layui.form,
            upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#uploadExcel' //绑定元素
            , url: '{:url("uploadExcel",$param)}?' //上传接口
            , accept: 'file'
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res) {
                layer.closeAll('loading'); //关闭loading

                if (res.code === 1) {
                    //上传完毕回调
                    // var newUrl = "{:url('zhibo/sort',$param)}?import=true&filename=".res.data.filename;
                    // location.href=newUrl
                    location.reload();
                } else {
                    layer.alert(res.msg);
                }
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading'); //关闭loading

            }
        });
        form.on('select(bindNameSort)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
             var id = data.elem.getAttribute('data-id');//排序的name对应的ID
             var value = data.value;
             layer.load();
             $.ajax({
                 url: "{:url('zhibo/bindNameSort')}",
                 type: "post",
                 dataType: "json",
                 data: {
                     name_id:id,
                     game_id:value,
                     type_id:{$param.type_id}
                 },
                 
             }).done(function (ret){
                 layer.closeAll('loading')
                 console.log(ret);
                 if(ret.code==1){
                     location.reload();
                 }else {
                     layer.alert(ret.msg);
                 }
             }).fail(function (err) {
                 layer.closeAll('loading')
             })


        });

        console.log(games);
        layer.load();
        games.map(function (item){
            var selectDom = document.querySelectorAll('select.list');
            selectDom.forEach(function (itemDom){
                itemDom.options.add(new Option(item.raw_name,item.id));
            })
        })
        form.render('select');


        layer.closeAll('loading');




    });

</script>
</body>
</html>